<template>
    <div class="signupbox">
         <form action="">
            <div class="signname">
                <label for="signname" class="iconfont">&#xe715;</label>
                <input type="text" name="signname" id="signname" placeholder="邮箱账号" v-model="signupData.name">
            </div>
            <div class="signyzm">
                <label for="signyzm" class="iconfont">&#xe6e6;</label>
                <span class="getyzm">{{ signupyzm }}</span>
                <input type="text" name="signyzm" id="signyzm" placeholder="验证码" v-model="signupData.yzm">
            </div>
            <div class="signpassword">
                <label for="signpassword" class="iconfont">&#xe709;</label>
                <input type="password" name="signpassword" id="signpassword" placeholder="密码" v-model="signupData.password">
            </div>
            <div class="signupzc">
                <span class="signupprompt">{{ signupprompt }}</span>
                <div class="signhelp">
                    <a :href="loginURL">登录已有账号</a>
                </div>
                <input type="button" value="注册" class="signsubmit" @click="judgeValue()">
            </div>
        </form>

        <!-- <h1>{{ signupData.name + ' ' + signupData.password + ' ' + signupData.yzm  }}</h1> -->

    </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'

export default {
    data(){
      return {
          loginURL:'http://' + window.location.host + '/#/login',
          signupyzm:'获取验证码',
          signupprompt:'',
          signupData:{
              name:'',
              password:'',
              yzm:''
          }

      }
    },
    methods:{
        judgeValue:function(){
            // 登录时 判断name\password格式是否符合要求
            let name = this.signupData.name;
            let password = this.signupData.password;
            let yzm = this.signupData.yzm;

            // 邮箱格式：****@**.***
            let namereg = /^\w{5,20}@(163|qq).\w{2,5}$/ig;
            // 密码格式 包含中英6-15之间
            let passwordreg = /^\w{6,}$/;
            // 验证码格式
            let yzmreg = /^[0-9a-zA-Z]{6}$/

            if(!namereg.test(name)){
                this.signupprompt = '请输入正确的qq/163邮箱';
            }else if(!passwordreg.test(password)){
                this.signupprompt = '请输入正确的包含中/英6位以上密码';
            }else if(!yzmreg.test(yzm)){
                this.signupprompt = '请输入6位中英验证码';
            }else{
                this.signupprompt = '';

                axios({
                   method:'post',
                   url:'http://lichunjiang.xyz/php/signupphp.php',
                   data:qs.stringify({
                       name:name,
                       password:password,
                       yzm:yzm
                   })
               }).then((res)=>{
                   
                   if(res.status === 200 && res.data === 'yes good' ){
                        alert("注册成功")
                   }else{
                       alert(res.data)
                   }

               })



            }
        }
        
    }
}
</script>

<style scoped>

.signupbox{
    box-sizing: border-box;
}
.signupbox > form{
    width: 100%;
    padding: 0 80px;
    padding-bottom: 10px;
    box-sizing: border-box;
}

 form .signname,
 form .signpassword,
 form .signyzm
{
    height: 70px;
    width: 100%;
    padding-top: 30px;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(228, 228, 228);
    position: relative;
}
label{
    font-size: 24px;
    color: #D1DDE8;
    float: left;
}
.signname input,
.signpassword input,
.signyzm input
{
    border: none;
    font-size: 18px;
    width: 80%;
    outline: none;
    padding-left: 10px;
    
}
input::-webkit-input-placeholder{
    color: #ccc;
}

.signupzc{
    font-size: 14px;
    padding-bottom: 20px;
}
.signupzc > .signsubmit{
    width: 100%;
    height: 40px;
    border-radius: 20px;
    outline: none;
    border: none;
    background: #0371D1;
    color: white;
    font-size: 20px;
}

.signupzc .signhelp{
    padding-top: 30px;
    padding-bottom: 20px;
}

.signhelp  a{
    text-decoration: none;
    color: #0371D1;
}

.getyzm{
  position: absolute;
  right: 0;
  bottom: 10px;
  display: inline-block;
  background: #0371D1;
  padding: 8px 10px;
  border-radius: 20px;
  font-size: 14px;
  color: white;
}

.signupprompt{
    display: block;
    padding-top: 6px;
    color: tomato;
}


</style>